<template>
  <div>
    <city-header :cities="cities"></city-header>
    <city-liebiao :hotCities="hotCities" :cities="cities" :letter="letter"></city-liebiao>
    <city-alphabet :cities="cities" @change="handleLetterChange"></city-alphabet>
  </div>
</template>

<script>
import CityHeader from './components/Header.vue'
import CityLiebiao from './components/liebiao.vue'
import CityAlphabet from './components/Alphabet.vue'
import axios from 'axios'
export default {
  name: 'City',
  components: {
    CityHeader,
    CityLiebiao,
    CityAlphabet
  },
  data () {
      return {
        hotCities: [],
        cities: {},
        letter: ''
      }
    },
    methods: {
      getHomeInfo () {
        axios.get('/static/json/city.json')
          .then(this.getHomeInfoSucc)
      },
      getHomeInfoSucc (res) {
        res = res.data
        if (res.ret && res.data) {
          const data = res.data
          this.cities = data.cities
          this.hotCities = data.hotCities
        }
      },
      handleLetterChange (letter) {
        this.letter = letter
      }
    },
    mounted () {
      this.getHomeInfo()
    }
  }
</script>

<style lang="stylus" scoped>
</style>
